// create by zhangguangde
// 评论页面

import React from 'react';
import $ from 'jquery';
import MerchantSelecterModule from './merchantSelecter.module.scss';

class MerchantSelecter extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    // UNSAFE_componentWillMount() {
    // }
    componentDidMount() {
        // 绑定点击选择框时间
        $('.' + MerchantSelecterModule['MerchantSelecter'] + ' section p').on('click', function() {
            // 弹出或收回菜单
            $('.' + MerchantSelecterModule['MerchantSelecter'] + ' ul').toggle('fast');
        });
        // 选择的场合
        $('.' + MerchantSelecterModule['MerchantSelecter'] + ' ul li').on('click', function() {
            // 更换文案 
            $('.' + MerchantSelecterModule['MerchantSelecter'] + ' section p span')[0].innerHTML = $(this)[0].innerHTML;
            // 弹出或收回菜单
            $('.' + MerchantSelecterModule['MerchantSelecter'] + ' ul').toggle('fast');
        });

        // 设置默认商户id
        this.setState({
            merchantId: this.props.merchantObj[0].merchantId
        }, function() {
        });
    }
    // componentWillReceiveProps(newProps) {}
    // shouldComponentUpdate(newProps, newState) {
    //     return true;
    // }
    // componentWillUpdate(nextProps, nextState) {}
    // componentDidUpdate(prevProps, prevState) {}
    // componentWillUnmount() {}

    /*
        设置店铺id
    */
    setMerchantId = (merchantId) => {
        this.setState({
            merchantId: merchantId
        }, function() {
            // 回调函数
            // 获取评论
            this.props.getComment();
        });
    }

    render() {

        return (
            <div className={MerchantSelecterModule['MerchantSelecter']}>
                <section>
                    <p className={MerchantSelecterModule['merchant-select-tittle']}>
                        <span>{this.props.merchantObj[0].merchantName}</span>
                        <i className={MerchantSelecterModule['bottom-arrow']}></i>
                    </p>
                    <ul>
                        {
                            /* 循环列表 */
                            this.props.merchantObj.map((merchant) =>
                                <li key={merchant.merchantId} onClick={this.setMerchantId.bind(this, merchant.merchantId)}>{merchant.merchantName}</li>
                            )
                        }
                    </ul>
                </section>
                
            </div>
        );
    }
}

export default MerchantSelecter;

